<template>
	<view class="custom-input flex align-center">
		<slot>
			<text :class="['iconfont',icon]"></text>
		</slot>
		<input 
			type="text" 
			:value="modelValue" 
			:placeholder="placeholder"
			@input="handleInput"
		/>
	</view>
</template>

<script>
	export default {
		name:"custom-input",
		props: {
			icon: {
				type: String,
				default: 'icon-a-001_sousuo'
			},
			placeholder:{
				type:String,
				default:'开始寻找你梦寐以求的工作...'
			},
			modelValue:String,
			modelName:String  
		},
		data() {
			return {
				
			};
		},
		methods: {
			handleInput(ev) {
				let v = ev.target.value
				this.$emit('update:modelValue',{
					key:this.modelName,
					value:v
				})
			}
		},
		created() {
			console.log(this.modelValue);
		}
	}
</script>

<style lang="scss">
.custom-input{
	border: 1upx solid rgba(238, 238, 238, 1);
	height: 96upx;
	padding: 0 30upx;
	border-radius: 4upx;
	.iconfont {
		font-size: 50upx;
		color: rgba(102, 110, 122, 1);
		margin-right:30upx;
	}
	input{
		flex: 1;
		&::placeholder{
			color: rgba(204, 204, 204, 1);
		}
	}
	input::placeholder{
		// color: rgba(204, 204, 204, 1);
		color: red;
	}
}
</style>